<template>
	<view class="contract_list">
		<view class="search">
		 <input_icon @input="inputKey" prefix="search" placeholder="编号或名称"/>
		 <text class="action" @tap="getContractList">查询</text>
		</view>
		<view class="list">
			<view class="thead">
				<view class="th code">合同编号</view>
				<view class="th status">执行状态</view>
				<view class="th">签约时间</view>
			</view>
			<view class="tbody">
				<view class="row" v-for="item in contractList" :key="item.contactCode">
					<view class="td code">{{item.contactCode}}</view>
					<view class="td status">{{item.contractStatus}}</view>
					<view class="td">{{item.signTime}}</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="contractList.length === 0 && showData">
			<image class="icon" src="/static/images/empty.png"></image>
			暂无数据
		</view>
		<LoadingBar
			:update='updating'
			:refresh="refresh"
			:params="{pageSize: 14, contract: this.key}"
			url="contractlist"
			:list="contractList"
			@bind_list="bindList"/>
	</view>
</template>

<script>
	import input_icon from '@/common/components/input/input-icon/index.vue'
	import LoadingBar from '@/common/components/loader/loadingBar/index.vue'
	export default {
		components: {
			input_icon, LoadingBar
		},
		data() {
			return {
				updating: false,
				refresh: false,
				showData: false,
				contractList: [],
				key: ''
			}
		},
		onReachBottom() {
		  this.updating = !this.updating;
		},
		mounted() {
			this.refresh = !this.refresh
		},
		methods: {
			inputKey(e) {
				this.key = e.target.value
			},
			bindList(list) {
				this.showData = true
				this.contractList = list
			},
			getContractList() {
				this.refresh = !this.refresh
			}
		},
	}
</script>

<style>
	.contract_list {
		background: #FFFFFF;
		min-height: 100vh;
		width: 100%;
		padding: 10upx;
	}
	
	.contract_list .search, .contract_list .search, .contract_list .search {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		right: 0rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 20upx 68upx;
	}
	.search .action {
		background: var(--theme-color);
		color: white;
		font-size: 32upx;
		width: 174upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.search input_icon {
		border: 1upx solid #DDDDDD;
		flex: 1;
	}
	.search .wrapper {
		height: 100upx;
		border-bottom: none;
	}
	.search input_icon .icon {
		width: 28upx;
		height: 28upx;
	}
	
	.contract_list .list {
		margin-top: 200upx;
		width: 100%;
	}
	.list .thead {
		border-bottom: 1upx solid #DDDDDD;
		width: 100%;
		position: fixed;
		top: 136upx;
		background-color: #FFFFFF;
	}
	.list .thead .th {
		display: inline-block;
		width: 25%;
		font-size: 30upx;
		text-align: center;
		padding: 13upx 5upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #666666;
	}
	.list .thead .th.code {
		width: 55%;
	}
	.list .thead .th.status {
		width: 20%;
	}
	.list .tbody {
		width: 100%;
	}
	.list .tbody .row {
		width: 100%;
	}
	.list .tbody .row .td {
		display: inline-block;
		font-size: 30upx;
		width: 25%;
		padding: 13upx 5upx;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #666666;
	}
	.list .tbody .row .td.code {
		width: 55%;
	}
	.list .tbody .row .td.status {
		width: 20%;
	}
	
	.empty {
		margin-top: 200upx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #999999;
		font-size: 32upx;
		box-sizing: border-box;
	}
	.empty .icon {
		width: 300upx;
		height: 300upx;
		margin-bottom: 68upx;
	}
</style>
